<template>
  <view class="container">
    <view class="row">
      <view class="left">信息状态：</view>
      <view class="text">认证通过</view>
    </view>
    <view class="row">
      <view class="left">身份：</view>
      <view class="text">学生</view>
    </view>
    <view class="row">
      <view class="left">手机号：</view>
      <view class="right" style="width: 400rpx;" v-if="!edit_mobile">
        <view class="text">{{ info.mobile }}</view>
        <image class="edit" src="/static/images/edit.png" @click="editMobile" v-if="info.can_update == 1"></image>
      </view>
      <input v-else type="number" class="input" @input="changeMobile" :value="info.mobile" placeholder="请输入手机号" name="mobile">
    </view>

    <view class="row">
      <view class="left">相关证件：</view>
    </view>
    <!--  学生信息  -->
    <view class="row" style="align-items: flex-start">
      <view class="left small">学生证：</view>
      <view class="right">
        <view class="upload-box" @click="upImg(1)" v-if="xsz_img == 0">
          <image class="upload-img" src="/static/images/upload.png"></image>
        </view>
        <image v-else class="img" @click="upImg(1)" :src="xsz_img_path" mode="aspectFill"></image>
      </view>
    </view>
    <view class="row" style="align-items: flex-start">
      <view class="left small">证件照片：</view>
      <view class="right" style="flex-direction: column">
        <view class="upload-box" @click="upImg(2)" v-if="imgs_arr[0].id == 0">
          <image class="upload-img" src="/static/images/upload.png"></image>
        </view>
        <image v-else class="img" @click="upImg(2)" :src="imgs_arr[0].path" mode="aspectFill"></image>
        <view class="upload-box" @click="upImg(3)" v-if="imgs_arr[1].id == 0">
          <image class="upload-img" src="/static/images/upload.png"></image>
        </view>
        <image v-else class="img" @click="upImg(3)" :src="imgs_arr[1].path" mode="aspectFill"></image>
      </view>
    </view>

    <view class="btn" @click="student_submit" v-if="info.can_update == 1">立即提交</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: [],
      mobile: '',
      xsz_img: 0,
      xsz_img_path: '',
      imgs_arr: [
        {
          id: 0, path: ''
        }, {
          id: 0, path: ''
        }
      ],
      edit_mobile: false
    };
  },

  onLoad: function () {
    var user_id = uni.getStorageSync('user_id');

    this.$http.post('/index/Api/userProveInfo', {user_id}).then(res => {
      if (res.data.result == 1) {
        this.info = res.data.data;
        this.imgs_arr = res.data.data.imgs_arr;
        this.xsz_img = res.data.data.xsz_img;
        this.xsz_img_path = res.data.data.xsz_img_path;
        this.mobile = res.data.data.mobile;
      } else {
        this.$common.doErrorResult(res)
      }
    })
  },

  methods: {
    changeMobile: function (e) {
      this.mobile = e.detail.value;
    },

    editMobile: function (){
      this.edit_mobile = true;
    },

    upImg: function (index) {
      if (this.info.can_update == 0) return;

      this.$common.uploadImg(res => {
        var {id, path} = res;
        if (id) {
          uni.showToast({
            title: '上传成功'
          })
          switch (index) {
            case 1:
              this.xsz_img = id;
              this.xsz_img_path = path;
              break;
            case 2:
              this.imgs_arr[0].id = id;
              this.imgs_arr[0].path = path;
              break;
            case 3:
              this.imgs_arr[1].id = id;
              this.imgs_arr[1].path = path;
              break;
          }
        } else {
          uni.showToast({
            title: '上传失败',
            icon: 'none'
          })
        }
      })
    },

    student_submit: function () {
      var user_id = uni.getStorageSync('user_id'),
        id = this.info.id,
        username = this.info.username,
        mobile = this.mobile,
        xsz_img = this.xsz_img,
        imgs_arr = this.imgs_arr,
        imgs = imgs_arr[0].id + ',' + imgs_arr[1].id,
        timestamp = Date.parse(new Date()),//该值除以1000就是当前的时间戳,
        sync_timestamp = uni.getStorageSync('timestamp') ? uni.getStorageSync('timestamp') : 0,//获取时间戳缓存,
        now_timestamp = timestamp / 1000,
        long_time = now_timestamp - sync_timestamp;//距离上次点击按钮经过的时长（秒）,

      uni.showLoading({
        title: '提交中...',
        mask: true
      })

      if (long_time > 3) {
        //将当前时间戳存为缓存
        uni.setStorageSync('timestamp', timestamp / 1000);

        this.$http.post('/index/Api/studentProve', {id, user_id, username, mobile, xsz_img, imgs}).then(res => {
          uni.removeStorageSync('timestamp');
          uni.hideLoading();

          if (res.data.result == 1) {
            uni.showToast({
              title: res.data.msg
            })

            uni.setStorageSync('student_prove_id', res.data.data);

            setTimeout(() => {
              uni.navigateBack();
            }, 500)
          } else {
            this.$common.doErrorResult(res);
          }
        })
      }
    },
  },

}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background: #f5f5f5;

  .row {
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    margin-top: 20rpx;

    .left {
      width: 180rpx;
      font-size: 32rpx;
      text-align: right;
    }


    .small {
      font-size: 28rpx;
      color: #3D3D3D;
    }

    .right {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .edit {
        width: 30rpx;
        height: 30rpx;
      }

      .img {
        width: 404rpx;
        height: 244rpx;
        margin-bottom: 20rpx;
      }
    }

    .text {
      color: #3D3D3D;
    }

    .input {
      flex: 1;
      border: 1rpx solid #d4cdcd;
      border-radius: 10rpx;
      padding: 10rpx 20rpx;
      color: #3D3D3D;
    }
  }

  .btn {
    font-size: 24rpx;
    color: #fff;
    background: #32a4ff;
    width: calc(100% - 40rpx);
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 24rpx;
    border-radius: 50rpx;
    text-align: center;
    margin-top: 100rpx;
  }

}
</style>

